<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_1190625_epsefnde7qw.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>首页搜索</title>
    <style>
        html,body{
            background-color: #FAFAFE;
        }
        .mui-title{
            width: 2.83rem!important;
            height: .3rem;
            font-weight: normal;
            line-height: .3rem;
            text-align: left;
            border-radius: .15rem;
            background-color: #f5f5fd;
        }
        .mui-title input{
            height: .3rem;
            background-color: #f5f5fd;
            line-height: .3rem;
            font-size: .14rem;
            color: #333;
            padding-left: .35rem;
        }
        .mui-title i{
            width: .18rem;
            font-size: .16rem;
            position: absolute;
            left: .15rem;
            right: .08rem;
        }
        .search_btn{
            font-size: .14rem;
            color: #333;
            font-weight: 500;
        }
        .mui-title input::-moz-placeholder{font-weight:400;color:#A5A5C1;}              
        .mui-title input::-webkit-input-placeholder{font-weight:400;color:#A5A5C1;}     
        .mui-title input:-ms-input-placeholder{font-weight:400;color:#A5A5C1;} 
        .history{
            width: 100%;
            padding: 0 .15rem;
        }
        .history .title{
            width: 100%;
            height: .57rem;
            line-height: .57rem;
        }
        .history .title span{
            font-size: .16rem;
            color:#333;
            font-weight: bold;
        }
        .history .title span i{
            font-size: .2rem;
            color: #999;
            font-weight: bold;
        }
        .hs_list .item{
            width: auto;
            height: .27rem;
            border-radius: .13rem;
            float: left;
            line-height: .27rem;
            padding: 0 .13rem;
            text-align: center;
            font-size: .14rem;
            color: #666;
            border: 1px solid #ccc;
            margin-right: .1rem;
            margin-bottom: .1rem;
        }
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav flex align-items space-between">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="请输入商品名称">
        </h1>
        <span class="search_btn">搜索</span>
    </header>
    <div class="main">
        <div class="history">
            <div class="title flex align-items space-between">
                <span>历史记录</span>
                <i class="delete iconfont icon-shanchu-01"></i>
            </div>
            <div class="hs_list">
                <div class="item">swiise</div>
                <div class="item">毛巾</div>
                <div class="item">泽豪帅的一批</div>
                <div class="item">商品</div>
                <div class="item">爱吃螺丝粉的男孩</div>
                <div class="item">运动装</div>
                <div class="item">没毛病</div>
                <div class="item">JS十大设计模式</div> 
                <div class="item">JS从进阶到放弃</div>
                <div class="item">程序员光头指南</div>
            </div>
        </div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
   $('.delete').click(function(){
       $('.hs_list').empty()
   })


</script>
</html>